<template>
  <div v-if="notEmptyColumns" class="setting-column" v-loading="saveLoading">
    <div class="setting-column__title">
      <span class="move_b"></span>
      <span class="show_b">显示</span>
      <span class="name_b">名称</span>
      <span class="width_b">宽度</span>
      <span class="sortable_b">排序</span>
      <span class="fixed_b">固定</span>
      <span class="showOverflow_b">内容省略</span>
    </div>
    <div class="setting-column__list" ref="list">
      <ul>
        <li v-for="item in columns" :key="item.prop">
          <span class="move_b">
            <el-tag class="move" style="cursor: move" size="small">
              <d-caret class="d-caret" style="width: 1em; height: 1em" />
            </el-tag>
          </span>
          <span class="show_b">
            <el-switch v-model="item.show" :active-value="true" :inactive-value="false" size="small" />
          </span>
          <span class="name_b" :title="item.prop">{{ item.label }}</span>
          <span class="width_b">
            <el-input v-model="item.width" placeholder="auto" size="small" />
          </span>
          <span class="sortable_b">
            <el-switch v-model="item.sortable" size="small" />
          </span>
          <span class="fixed_b">
            <el-switch v-model="item.fixed" size="small" />
          </span>
          <span class="showOverflow_b">
            <el-switch v-model="item.showOverflowTooltip" size="small" />
          </span>
        </li>
      </ul>
    </div>
    <div class="setting-column__bottom">
      <el-button @click="backDefault" :disabled="saveLoading" size="small">重置</el-button>
      <el-button @click="save" type="primary" size="small">保存</el-button>
    </div>
  </div>
  <el-empty v-else description="暂无可配置的列" :image-size="80"></el-empty>
</template>

<script setup name="ColumnSetting">
import Sortable from 'sortablejs'
import { ref, onMounted, getCurrentInstance } from 'vue'

const props = defineProps({
  columns: {
    type: Array,
    default: []
  }
})

// console.log(props.columns,'columnsetting')
const saveLoading = ref(false)

function backDefault() {
  emit('resetColumn')
}

const emit = defineEmits()
function save() {
  // console.log('columns setting save', props.columns)
  emit('save', props.columns)
}

const notEmptyColumns = props.columns.length > 0 || false
onMounted(() => {
  notEmptyColumns && rowDrop()
})

const { proxy } = getCurrentInstance()
function rowDrop() {
  const tbody = proxy.$refs['list'].querySelector('ul')
  Sortable.create(tbody, {
    handle: '.move',
    animation: 300,
    ghostClass: 'ghost',
    onEnd({ newIndex, oldIndex }) {
      const tableData = props.columns
      const currRow = tableData.splice(oldIndex, 1)[0]
      tableData.splice(newIndex, 0, currRow)
      // emit('save', props.columns)
    }
  })
}
</script>

<style scoped>
.setting-column {}

.setting-column__title {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

.setting-column__title span {
  display: inline-block;
  font-weight: bold;
  color: #909399;
  font-size: 12px;
}

.setting-column__title span.move_b {
  width: 30px;
  margin-right: 15px;
}

.setting-column__title span.show_b {
  width: 60px;
}

.setting-column__title span.name_b {
  width: 100px;
}

.setting-column__title span.width_b {
  width: 60px;
  margin-right: 15px;
}

.setting-column__title span.sortable_b {
  width: 60px;
}

.setting-column__title span.fixed_b {
  width: 60px;
}

.setting-column__list {
  max-height: 314px;
  overflow: auto;
}

.setting-column__list ul {
  padding-left: 0;
}

.setting-column__list li {
  list-style: none;
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.setting-column__list li>span {
  display: inline-block;
  font-size: 12px;
}

.setting-column__list li span.move_b {
  width: 30px;
  margin-right: 15px;
}

.setting-column__list li span.show_b {
  width: 60px;
}

.setting-column__list li span.name_b {
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: default;
}

.setting-column__list li span.width_b {
  width: 60px;
  margin-right: 15px;
}

.setting-column__list li span.sortable_b {
  width: 60px;
}

.setting-column__list li span.fixed_b {
  width: 60px;
}

.setting-column__list li span.showOverflow_b {
  width: 60px;
}

.setting-column__list li.ghost {
  opacity: 0.3;
}

.setting-column__bottom {
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
  text-align: right;
}
</style>
